﻿<template>
  <ul class="ipAdress" :style="showStyle" :hidden="!isShow">
    <li v-for="(item,index) in ipAdress" :key="index">
      <input
        type="text"
        :disabled="!isEnable"
        :readonly="isReadOnly"
        @input="checkIpVal(item,index)"
        @keyup="turnIpPOS(item,index,$event)"
        v-model="item.value"
        ref="ipInput"
      />
      <div></div>
    </li>
  </ul>
</template>
<script>
export default {
  props: ['isShow', 'isEnable', 'isReadOnly', 'value', 'showStyle'],
  data () {
    return {
      ipAdress: [
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        }
      ]
    }
  },
  methods: {
    initComponent () {
      this.cell = {}
      this.value.split('.')
      this.setValue(this.value)
    },
    setValue (v) {
      let reg = /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))|\*)((\/([012]\d|3[012]|\d))?)(,((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))|\*)((\/([012]\d|3[012]|\d))?))*$/
      if (v && reg.test(v)) {
        let arr = v.split('.')
        this.ipAdress[0].value = arr[0]
        this.ipAdress[1].value = arr[1]
        this.ipAdress[2].value = arr[2]
        this.ipAdress[3].value = arr[3]
      }
    },
    getValue () {
      return this.ipAdress[0].value + '.' + this.ipAdress[1].value + '.' + this.ipAdress[2].value + '.' + this.ipAdress[3].value
    },
    clearData () {
      this.ipAdress = [
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        }
      ]
    },
    checkIpVal (item, index) {
      // 输入时事件
      // let self = this
      // 确保每个值都处于0-255
      let self = this
      let val = item.value
      // 当输入的是空格时，值赋为空
      val = val.trim()
      val = parseInt(val, 10)
      if (isNaN(val)) {
        val = ''
      } else {
        val = val < 0 ? '' : val
        val = val > 255 ? 255 : val
      }
      item.value = val
      console.log(val)
      if (val > 99 && index < this.ipAdress.length - 1) {
        // 判断内容是否可以跳框
        self.$refs.ipInput[index + 1].focus()
      }
      if (val === '' && index !== 0) {
        self.$refs.ipInput[index - 1].focus()
      }
    },
    turnIpPOS (item, index, event) {
      let self = this
      let e = event || window.event
      // 左箭头向左跳转，左一不做任何措施
      if (e.keyCode === 37) {
        if (index === 0) {
        } else {
          console.log(index)

          self.$refs.ipInput[index - 1].focus()
        }
      }
      // 右箭头、回车键、空格键、冒号均向右跳转，右一不做任何措施
      if (
        e.keyCode === 39 ||
        e.keyCode === 13 ||
        e.keyCode === 32 ||
        e.keyCode === 190
      ) {
        if (index === 3) {
        } else {
          console.log(index)
          self.$refs.ipInput[index + 1].focus()
        }
      }
    }
  },
  mounted () {
    this.initComponent()
  },
  destroyed () {
    this.clearData()
  },
  watch: {
    isShow: {
      handler: function (val, oldVla) {
        if (val) {
          this.initComponent()
        } else {
          this.clearData()
        }
      }
    },
    ipAdress: {
      deep: true,
      handler (val) {
        this.$emit('update:value', this.getValue())
      }
    }
  }
}
</script>
